<template>
  <div class="main">
    <div class="title">
      <el-button type="danger" size="medium" @click="dialogVisible=true">新增模板</el-button>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%"
      class="table"
      :stripe="true"
    >
      <el-table-column
        label="版块类型"
        width="180"
      >
        <template slot-scope="scope">
          {{ getTypeName(scope.row.templateType) }}
        </template>
      </el-table-column>
      <el-table-column
        prop="transportType"
        label="运送类型"
        width="180"
      />
      <el-table-column
        label="关联城市"
      >
        <template slot-scope="scope">
          {{ associatedCityListName(scope.row.associatedCityList).join(", ") }}
        </template>
      </el-table-column>
      <el-table-column
        prop="firstWeight"
        label="首重"
      />
      <el-table-column
        prop="continuousWeight"
        label="续重"
      />
      <el-table-column
        prop="lightThrowingCoefficient"
        label="轻抛系数"
      />
      <el-table-column
        prop="address"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleClick(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="hdel(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      :visible="dialogVisible"
      width="650px"
      title="新增模板"
      close-on-press-escape
      @close="dialogVisible=false"
    >

      <el-form ref="form" :model="form" label-width="150px" :rules="rules">
        <el-form-item label="模板类型" prop="templateType">
          <el-select v-model="form.templateType" placeholder="请选择模板区域" style="width:350px">
            <el-option label="同城寄" :value="1" />
            <el-option label="省内寄" :value="2" />
            <el-option label="经济区互寄" :value="3" />
            <el-option label="跨省" :value="4" />
          </el-select>
        </el-form-item>
        <el-form-item label="运送类型" prop="transportType">
          <el-select v-model="form.transportType" placeholder="请选择活动区域" style="width:350px">
            <el-option label="普快" :value="1" />
            <el-option label="特快" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="关联城市" prop="associatedCityList">
          <div>全国</div>
        </el-form-item>
        <el-form-item label="首重价格" prop="firstWeight">
          <el-input v-model="form.firstWeight" style="width:350px" placeholder="请输入首重价格" />
        </el-form-item>
        <el-form-item label="续重价格" prop="continuousWeight">
          <el-input v-model="form.continuousWeight" style="width:350px" placeholder="请输入续重价格" />
        </el-form-item>
        <el-form-item label="轻抛系数" prop="lightThrowingCoefficient">
          <el-input v-model="form.lightThrowingCoefficient" style="width:350px" placeholder="请输入轻抛系数" />
        </el-form-item>
        <el-form-item label-width="200px" style="margin-top:50px">
          <el-button type="danger" @click="onSubmit">确定</el-button>
          <el-button style="margin-left:50px" @click="hclose">取消</el-button>
        </el-form-item>
      </el-form></el-dialog>
  </div>
</template>

<script>
import { getFreightInfo, addFreightInfo, delFreightInfo } from '@/api/dataManagement'
export default {
  data() {
    return {
      form: {
        templateType: '',
        transportType: '',
        associatedCityList: [1],
        firstWeight: '',
        continuousWeight: '',
        lightThrowingCoefficient: ''

      },
      inputWidth: '150px',
      dialogVisible: false,
      tableData: [],
      cityList: {
        1: '全国',
        2: '京津冀',
        3: '江浙沪',
        4: '川渝',
        5: '黑吉辽'
      },
      rules: {
        templateType: [
          { required: true, message: '请正确填写', trigger: 'blur' }
        ],
        transportType: [
          { required: true, message: '请正确填写', trigger: 'blur' }
        ],
        associatedCityList: [
          { required: true, message: '请正确填写', trigger: 'blur' }
        ],
        firstWeight: [
          { required: true, message: '请正确填写', trigger: 'blur' }
        ],
        continuousWeight: [
          { required: true, message: '请正确填写', trigger: 'blur' }
        ],
        lightThrowingCoefficient: [
          { required: true, message: '请正确填写', trigger: 'blur' }
        ]

      }
    }
  },
  computed: {
    associatedCityListName() {
      return (associatedCityList) => {
        return associatedCityList.map((cityNum) => this.cityList[cityNum])
      }
    },
    getTypeName() {
      return (type) => {
        switch (type) {
          case 1:
            return '同城寄'
          case 2:
            return '省内寄'
          case 3:
            return '经济区互寄'
          case 4:
            return '跨省'
          default:
            return ''
        }
      }
    }

  },
  created() {
    // 初始化渲染
    this.loadTableData()
  },
  methods: {
    // 封装初始化渲染请求
    async loadTableData() {
      const res = await getFreightInfo()
      console.log(res)
      this.tableData = res.data
    },

    // 添加确定键
    onSubmit() {
      this.$refs.form.validate(async valid => {
        if (valid) {
          // 表单验证通过，提交表单
          if (this.form.id) {
            await addFreightInfo(this.form)
          } else {
            await addFreightInfo(this.form)
          }
          // this.tableData.push(this.form)
          this.loadTableData()
          this.$message.success('添加成功')
          this.hclose()
        }
      })
    },
    // 弹框点x关闭
    hclose() {
      this.dialogVisible = false
      this.$refs.form.resetFields()
    },
    // 编辑回显
    handleClick(e) {
      this.dialogVisible = true
      this.form = e
    },
    async  hdel(id) {
      await delFreightInfo(id)
      this.loadTableData()
    }
  }
}
</script>
<style scoped>
.title{
   margin-bottom: 30px;
}
.main{
      background-color: #fff;
    color: #333;
    /* line-height: 160px; */
    margin:70px 20px 0 ;
    padding: 30px 50px 100px 50px;
}
.table{
     border: 1px solid #ebeef5;
}

</style>
